We now know how to get started creating a browser window instance and load some HTML content into it.
So in this lesson, let's take that one step further and see how to create parent and child windows
still on the main browser window.
Documentation page.
Scroll down a bit.
Yeah, another dedicated section on the topic.
But before we start creating these links, we'll need a second browser window.
Remember, we can create multiple renderer processes being instances of the browser window module running
chromium from a single main process over to main mandatories declare a new global variable to reference
the new window secondary window, duplicate this main window instantiation, this time assigning the
resulting browser window to that new variable secondary window with a width of 600 and a height of 300,
just so we can tell them apart.
I'll load the same index, not HTML file into the new window.
For now, we don't need dev tools so commented out and finally duplicate this closed listener in order
to unseat the secondary window.
Done so, doing exactly the same as we did when creating main window.
I already have the app running with a watch command, so save and the app launches with those two windows,
main window and secondary window, the second appearing on top as it was created and shown last.
In this state they behave, as you would expect, completely independent of each other.
You can even close one of them.
So simple enough.
But let's say the secondary window was created as part of the main window.
For example, you click something in the main window which then launch a secondary window in such cases,
which is going to be most of the time when dealing with multiple windows, you're going to want to make
the second window a child of the main app window.
So let's see this.
I'll change the content of the secondary window.
Also duplicate indexed HTML.
Secondary HTML.
Change this mind heading to secondary window.
And in the style tag, set, the background color dodger blue there, this will just make the separation
a bit clearer when demonstrating update load file with that new e-mail file secondary, not HTML.
And now with that done, we can make secondary window a child of mine window by setting its parent option
to main window.
So this Windows parent is main window, meaning it can only exist alongside of main window save that
launches exactly as before.
This time with the new content, the child window can still be moved around freely, but being bound
to this main window its parent.
When I move the main window, it follows along.
Notice how it also does not get blurred to the back of main window.
Back to the child window, resize it, move it and so on.
We can even close the child window as before without it affecting the main window.
But as soon as the main window is closed, they're both gone.
So a simple one way relationship.
This can be done slightly differently by making the child window a modal window.
Also still a child of mine window, but of type model again in the secondary windows configuration set
model to save.
And this time we get an attached a child window that shares the same TOPA as its parent does, of course,
being a great option for forcing the user to this child window as you cannot interact with the parent
window until this is gone.
But not having a close button for this model makes it a bit tricky also.
So the idea here is to display the model to a user, and once they've performed some action inside of
that model child window, you close it programmatically within mindspace or wherever you created it,
allowing the user back to main window.
I'll demonstrate a basic version of this using some timeouts in order to show the modal window, then
will want to first hide it on secondary windows configuration show set to false.
Then in a time out of the callback, execute secondary window dot show with a second time out immediately
after to start the countdown to close it, keeping in mind that in order to close this child window,
you don't have to get rid of it completely.
You could instead call Hyd meaning at a later time you could bring it back by calling show again.
Alternatively, if you're definitely done with it close, meaning the reference to the window can be
destroyed as well.
Secondary window equals no.
We still need the time out.
Durations show off to say, two seconds and hide three seconds after that.
I'll also remove this closed listener for the secondary window as that's redundant.
Now save.
Two seconds later, the model is displayed and another three seconds later, it retracts in the same
way, rendering our main window usable again.
That's it for basic parent child windows.
But I want to point out that the standard behavior for parent and child windows, especially models,
can vary quite a bit depending on the platform.
So it's definitely worth reading through the platform notices in this section.